<template>
  <div class="hdgl-edit-step-3">
    <a-form-model ref="form" :model="model" label-width="210px" size="small">
      <a-form-model-item label="活动阶梯设置" :required="true">
        <div v-for="(item, index) in rules" :key="index" class="award-item ml-30 d-aic">
          {{ toChineseIndex(index) }}级阶梯裂变 助力人数:
          <a-input-number
            controls-position="right"
            class="input-number"
            v-model="item.target"
            :min="1"
            :max="10000"/>
          人,奖品数
          <a-input-number
            controls-position="right"
            class="input-number"
            v-model="item.stock"
            :min="1"
            :max="10000"/>
          <a-button
            v-if="index>0"
            type="primary"
            shape="circle"
            style="margin-left: 16px;"
            class="d-jcc-aic"
            @click="removeRule(index)">
            <span class="material-icons" style="font-size: 16px;color: white">delete_forever</span>
          </a-button>
        </div>
        <b-button
          prefixIcon="plus"
          class="award-button ml-30"
          v-if="rules.length<3"
          btn-content="增加阶梯"
          type="default"
          ghost="default"
          @click="addNewRule">
        </b-button>

        <div class="ml-30">
          <div class="d-aic">
            <div
              v-for="(item, index) in rules"
              :key="index"
              class="tab-title"
              :class="{'active':activeKey===index}"
              @click="changeRule(index)">
              {{ toChineseIndex(index)+'级阶梯' }}
            </div>
          </div>
          <div v-for="(item, index) in rules" :key="index" class="d-aic">
            <div v-show="activeKey===index">
              <wx-reply-editor-wrap
                v-model="item.msgReward"
                title="达成助力人数提醒文案"
                tips="当完全对应阶梯人数时，推送此提醒文案或图片"
                :sampleCopyType="'ladder'+(index+1)"
              />
            </div>
          </div>
        </div>
      </a-form-model-item>
    </a-form-model>
  </div>
</template>

<script>
  import { Empty } from 'ant-design-vue'
  import { toChineseIndex } from '@/perm/utils'
  import WxReplyEditorWrap from './wx-reply-editor-wrap'

  export default {
    name: 'HdglEditStep3',
    components: {
      WxReplyEditorWrap,
      Empty
    },
    props: {
      model: {
        type: Object,
        default: () => {
        }
      }
    },
    data () {
      return {
        toChineseIndex,
        keywordDemo: false,
        activeKey: 0
      }
    },
    computed: {
      rules () {
        return this.model.rules
      },
      /**
       * 奖品剩余数量
       */
      leftStock () {
        let s = 0
        if (this.model.stock) {
          try {
            s = Number.parseInt(this.model.stock, 10)
          } catch (e) {
            console.debug('stock设置有误')
          }
        }
        if (this.model.stockUsed) {
          try {
            const u = Number.parseInt(this.model.stockUsed, 10)
            s -= u
          } catch (e) {
            console.debug('stockUsed设置有误')
          }
        }
        return s
      },
      splitButton () {
        const btnList = []
        for (let i = 0; i < this.rules.length; i++) {
          let numCn = null
          if (i + 1 === 1) {
            numCn = '一'
          }
          if (i + 1 === 2) {
            numCn = '二'
          }
          if (i + 1 === 3) {
            numCn = '三'
          }
          btnList.push({ name: numCn + '阶任务目标人数', value: this.rules[i].target })
        }
        return { name: 'taskTargetNum', btnList: btnList }
      }
    },
    methods: {
      /**
       * 增加新奖励项, 保存钱排序
       */
      addNewRule () {
        this.model.rules.push({
          msgReward: this.ruleMsg,
          target: null,
          level: 3,
          stock: null,
          name: '三级阶梯'
        })
      },
      removeRule (index) {
        if (this.model.rules.length <= 1) {
          this.$message.warning(`活动阶梯最少1阶`)
          return
        }
        this.model.rules.splice(index, 1)
      },
      check () {
        const rules = this.model.rules
        rules.forEach(item => {
          if (!item.target || !item.stock) {
            throw new Error('阶梯内容不能为空')
          }
        })
        if (rules.length === 1) {
          return
        }
        for (let i = 0; i < rules.length - 1; i++) {
          for (let j = i + 1; j < rules.length; j++) {
            if (rules[i].target === rules[j].target) {
              throw new Error('阶梯目标人数不能相同')
            }
          }
        }
      },
      changeRule (index) {
        this.activeKey = index
      }
    }
  }
</script>

<style scoped lang="less">
  .hdgl-edit-step-3 {
    min-height: 300px;

    .empty-style {
      width: 100%;
      min-height: 300px;
    }

    .input-number {
      margin-right: 5px;
      margin-left: 16px;
      width: 100px;
    }

    .tab-title {
      margin-right: 15px;
      color: #595959;
      font-size: 14px;
      cursor: pointer;

      &.active {
        color: #2493FC;
      }
    }
  }
</style>
